<template>
	<view class="content">
		<Swipers swiperUrl="/prod-api/api/movie/rotation/list" detailsUrl="../movie/movie_details?id="></Swipers>
		<view class="Search_box">
			<input type="text" @confirm="SearchMovie" @focus="is_hide=false" @blur="SearchMovie" confirm-type="search"
				v-model="search" placeholder="请输入搜索内容" />
			<icon @click="SearchMovie" type="search"></icon>
		</view>
		<view class="movie_box">
			<view class="movie_box_item" @click="goMovies(item.id)" v-for="(item,index) in movie_arr"
				v-show="is_hide==false||index<5">
				<image mode="aspectFill" :src="host+item.cover"></image>
				<view class="movie_text">
					<view class="movie_name">影片名称:{{item.name}}</view>
					<view>上映时间:{{item.playDate}}</view>
					<view>时长:{{item.duration}}分钟</view>
					<view>语言:{{item.language}}</view>
					<view>评分:{{item.score}}星</view>
				</view>
			</view>
			<button type="primary" size="mini" class="is_hide" v-show="is_hide&&search==''"
				@click="is_hide=false">查看更多</button>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/request.js";
	export default {
		data() {
			return {
				host: uni.getStorageSync("BASE_URL"),
				search: "",
				img_arr: [],
				movie_arr: [],
				is_hide: true
			}
		},
		created() {
			let that = this;
			http({
				url: "/prod-api/api/movie/film/list"
			}).then((res) => {
				that.movie_arr = res.data.rows;
			});
		},
		methods: {
			goMovies(id) {
				uni.navigateTo({
					url: "/pages/movie/movie_details?id=" + id
				})
			},
			SearchMovie() {
				let that = this;
				console.log(this.search);
				http({
					url: "/prod-api/api/movie/film/list",
					data: {
						name: this.search
					}
				}).then((res) => {
					that.movie_arr = res.data.rows;
				});
				that.is_hide = true;
			}
		}
	}
</script>

<style>
	.content {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	swiper {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.Search_box {
		width: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50rpx;
		padding: 0 .5rem 0 2rem;
		box-sizing: border-box;
		border-radius: 1rem;
		background-color: #d9d9d9;

	}

	.movie_box {
		display: flex;
		flex-direction: column;
	}

	.movie_box_item {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #ecf0f1;
		margin-top: 30rpx;
		border-radius: 30rpx;
	}

	.movie_box image {
		flex: 2;
	}

	.movie_box .movie_text {
		flex: 3;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.is_hide {
		margin-top: 20rpx;
		align-self: center;
	}
</style>
